<script lang="ts" setup>
import { getBannerList, getNavList, getProList } from '../../api/home'
import { onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import { iBanner, iNav, iPro } from './homeType'
import { useUserInfoStore } from '../../stores/userInfo'

import ProListCom from '../../components/proListCom.vue'

// 全局数据
const userStore = useUserInfoStore()
// 轮播图数据
const bannerList: Ref<iBanner[]> = ref([])
// 宫格数据
const navList: Ref<iNav[]> = ref(getNavList())
// 商品数据
const proList: Ref<iPro[]> = ref([])
// 定义一个当前的页码,因为默认请求的是第一页的数据
// 所以这里的页码设置为 2 下次请求就要拿第二页的数据
const count = ref(2)



onMounted(() => {

    getBannerList().then(res => {
        // console.log(res);
        bannerList.value = res.data.data
    })

    getProList({ count: 1 }).then(res => {
        // console.log(res.data.data);
        proList.value = res.data.data
    })
})

// ------------------ 上拉加载更多 -------------------
// 标记是否正在加载
const loading = ref(false)
// 标记是否还有更多数据
const finished = ref(false)
// 当触发上拉之后，执行的函数
function onLoad() {

    // 标记正在加载中
    loading.value = true

    getProList({ count: count.value }).then(res => {
        // console.log(2222222222, res.data.data);

        if (res.data.data.length > 0) {
            // 将原来的老数据和加载的新数据放在一起
            proList.value = [...proList.value, ...res.data.data]
            // 下次请求的时候在往下一页即可
            count.value++
            // 加载结束之后，将状态设置回去
            loading.value = false
        } else {
            // 标记没有更多数据了
            finished.value = true
        }

    })
}

// -------------------- 点击回到顶部 ---------------------------
// 记录页面的滚动距离
const scrollTop = ref(0)
function scrollTopFn(event) {
    // console.log(event.target.scrollTop);
    scrollTop.value = event.target.scrollTop
}
// 在组合式 API 中获取 ref 
const contentRef = ref()
function backTopClick() {
    // console.dir(contentRef.value);
    contentRef.value.scrollTop = 0
}


// --------------------- 下拉刷新 -----------------
const refreshLoading = ref(false)
function onRefresh() {
    // console.log(11111111111);
    // 标记正在下拉
    refreshLoading.value = true

    getProList({ count: 1 }).then(res => {
        // console.log(res.data.data);
        proList.value = res.data.data

        // 标记下拉加载结束
        refreshLoading.value = false

        // 恢复上拉加载的属性
        finished.value = false
        count.value = 2
        loading.value = false
    })

}
</script>
<template>
    <div class="box">
        <header class="header">首页</header>
        <div class="content" ref="contentRef" @scroll="scrollTopFn">

            <!-- <div>
                {{ userStore.userid }}
            </div> -->


            <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">


                <!-- 轮播图代码 -->
                <van-swipe :autoplay="3000" indicator-color="#f66">
                    <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
                        <van-image class="swipe-image" :src="item.img" />
                    </van-swipe-item>
                </van-swipe>




                <!-- 宫格布局 -->
                <van-grid :border="false" column-num="5">
                    <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
                </van-grid>




                <!-- 商品列表 -->
                <van-list v-model:loading="loading" :finished="finished" finished-text="亲没有了哦" @load="onLoad">
                    <ProListCom :proList="proList" />
                </van-list>


                <!-- 点击回到顶部的按钮 -->
                <div class="backtop" @click="backTopClick" v-show="scrollTop > 400">
                    <van-icon size="30" name="back-top" />
                </div>
            </van-pull-refresh>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.swipe-image {
    width: 100%;
    height: 200px;
}

.backtop {
    position: fixed;
    bottom: 110px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #f66;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>